<template>
     <el-container>
           <el-header class="header_activate">
                <h1>系统通知</h1>
               <div class="filter" id="top_position">
                <el-switch
                v-model="state.status"
                class="mb-2"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
                active-text= "全部"
                inactive-text= "未读"
                active-value = 'all'
                inactive-value = 'hasNotRead'
                @change="handleSwithChange()"          
                />
               </div>
           </el-header>
           <el-divider />
           <el-main>
               <el-table class="tableClass" :data="state.notificationList" stripe                   
                   :header-cell-style="{ background: '#eef1f6', color: '#606266' }"                    
                    border
               > 
                   <el-table-column type="index" width="45" label="序" />
                   <el-table-column width="115" property="add_date" label="日期"/>                 
                   <el-table-column width="500" label="内容">
                        <template #default="scope"> 
                            <span v-if="scope.row.status==1">{{ scope.row.content }}</span>
                            <span v-else><strong>{{ scope.row.content }}</strong></span>
                        </template>
                    </el-table-column>
                   <el-table-column align="center" width="90" label="操作" >                        
                       <template #default="scope"> 
                           <el-tooltip
                           class="box-item"
                           effect="dark"
                           content="标记已读"
                           placement="top"
                           >
                               <el-icon style="width: 1em; height: 1em; margin-right: 10px" @click="setHasRead(scope.row.id)">
                                   <MuteNotification />
                               </el-icon>
                           </el-tooltip>
                           <el-tooltip
                           class="box-item"
                           effect="light"
                           content="详情"
                           placement="top"
                           >
                               <More style="width: 1em; height: 1em;" @click="viewDetailClick(scope.$index, scope.row.id)" />
                           </el-tooltip>
                       </template>
                   </el-table-column>
               </el-table>

               <el-pagination
               background
               layout="total, pre, pager, next"
               :total="state.total"                
               :page-size="state.pageSize"            
               @current-change="handleCurrentChange"
               />
               <el-dialog
                    v-model="state.dialogVisible"
                    title="通知详情"
                    width="50%"
                    :before-close="handleClose"
                >
                <span>{{ state.notificationList[state.detailNotificationIndex] }}</span>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button type="warning" @click="state.dialogVisible = false">关闭</el-button>
                    </span>
                </template>
                </el-dialog>
           </el-main>
           
       </el-container>
</template>  

<script setup>
import {onMounted, reactive, ref } from 'vue'
import { MuteNotification, More } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from '@/utils/axios'

const state = reactive({
    status: 'all',
    notificationList:[],
    detailNotificationIndex:0,
    dialogVisible:false,
    total: 0, // 总条数
    currentPage: 1, // 当前页
    pageSize: 10, // 分页大小
})

// 页面初始化
onMounted(() => {
    getOwnNotification()
})
// 滚到顶端
const scrollToTop=()=>{
document.querySelector('#top_position').scrollIntoView(true);
}
//点击页码时触发
const handleCurrentChange = (newPage)=>{
    state.currentPage = newPage
    getOwnNotification()
    scrollToTop()
}
// 发送后台设置通知已读
const setNotificationHasRead=(id)=>{
    let params={pk:id}
    axios.patch(`/NotificationModelViewSet/${params.pk}/set_own_has_read/`, params).then(res => {
        if (res.code==200){            
            console.log("标记为已读成功")       
        }else{
            ElMessage.error("此操作失败！")
        }
    })
    .catch((error)=>{
        console.log("获取数据错误：", error)
    })
}
// 发送获取所有自己的通知
const getOwnNotification=()=>{
    let params = {
          page: state.currentPage,
          size: state.size,
      }
    axios.get(`/NotificationModelViewSet/only_owner/`,{params}).then(res => {
        console.log("获取自己的通知：", res)
        if (res.code==200){            
            state.notificationList = res.data.results
            state.total = res.total
        }else{
            ElMessage.error("没有查询到通知")    
            console.log("error", res.message)
        }
    })
    .catch((error)=>{
        console.log("获取通知数据错误：", error)
    })
}

// 查看详情，并标记该通知为已读
const viewDetailClick=(index, id)=>{
    state.detailNotificationIndex = index
    state.dialogVisible=true
    setNotificationHasRead(id)
    getOwnNotification()
}

</script>
<style scoped>

</style>